<!-- templates/video_processing.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频生成中 - 花艺AI测试应用</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body { padding-top: 2rem; }
        .header { margin-bottom: 2rem; }
        .processing-container { max-width: 800px; margin: 0 auto; }
        .status-container { position: relative; padding: 20px; margin-bottom: 30px; }
        .progress-info { text-align: center; margin: 20px 0; }
        .step-container { margin-bottom: 30px; }
        .step { border-left: 3px solid #ccc; padding: 0 0 30px 20px; position: relative; }
        .step:last-child { padding-bottom: 0; }
        .step::before { content: ''; position: absolute; width: 20px; height: 20px; background: #f8f9fa; border: 3px solid #ccc; border-radius: 50%; left: -11px; top: 0; }
        .step.active { border-left-color: #0d6efd; }
        .step.active::before { border-color: #0d6efd; background: #0d6efd; }
        .step.completed { border-left-color: #198754; }
        .step.completed::before { border-color: #198754; background: #198754; }
        .step-content { padding-left: 10px; }
        .step-title { font-weight: bold; margin-bottom: 5px; }
        .animation-container { width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; margin: 20px 0; background-color: #f8f9fa; border-radius: 10px; overflow: hidden; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header text-center">
            <h1>花艺AI测试应用</h1>
            <p class="lead">视频生成中</p>
            <nav class="nav justify-content-center">
                <a class="nav-link" href="/">首页</a>
                <a class="nav-link" href="/upload">上传知识</a>
                <a class="nav-link" href="/image">生成图像</a>
                <a class="nav-link" href="/speech">语音交互</a>
                <a class="nav-link" href="/video/list">视频库</a>
                <a class="nav-link" href="/status">系统状态</a>
            </nav>
        </div>

        <div class="processing-container">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-gear-fill"></i> 视频生成中</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info mb-4">
                        <i class="bi bi-info-circle-fill"></i> 系统正在生成您的花艺教学视频，请耐心等待。该过程可能需要几分钟时间。您可以等待页面自动刷新，或稍后返回查看结果。
                    </div>

                    <div class="progress-info">
                        <h4 id="status-message">{{ task.message or '正在处理中...' }}</h4>
                        <div class="progress" style="height: 20px;">
                            <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated"
                                role="progressbar"
                                style="width: {{ task.progress or 0 }}%;"
                                aria-valuenow="{{ task.progress or 0 }}"
                                aria-valuemin="0"
                                aria-valuemax="100">
                                {{ task.progress or 0 }}%
                            </div>
                        </div>
                    </div>

                    <div class="animation-container">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <div class="mt-3" id="current-step-display">正在生成文案...</div>
                        </div>
                    </div>

                    <div class="step-container">
                        <div class="step active" id="step-1">
                            <div class="step-content">
                                <div class="step-title">步骤 1: 生成文案</div>
                                <div class="step-desc">AI正在根据您的主题 "{{ task.request.topic }}" 生成专业的花艺教学文案。</div>
                            </div>
                        </div>
                        <div class="step" id="step-2">
                            <div class="step-content">
                                <div class="step-title">步骤 2: 创建虚拟花艺师</div>
                                <div class="step-desc">系统正在生成一名{{ '动漫风格' if task.request.character_style == 'anime' else ('写实风格' if task.request.character_style == 'realistic' else '绘画风格') }}的虚拟花艺师形象。</div>
                            </div>
                        </div>
                        <div class="step" id="step-3">
                            <div class="step-content">
                                <div class="step-title">步骤 3: 合成语音</div>
                                <div class="step-desc">使用VITS技术为视频内容生成自然流畅的语音。</div>
                            </div>
                        </div>
                        <div class="step" id="step-4">
                            <div class="step-content">
                                <div class="step-title">步骤 4: 生成角色动画</div>
                                <div class="step-desc">为虚拟花艺师添加口型动画，使其与语音同步。</div>
                            </div>
                        </div>
                        <div class="step" id="step-5">
                            <div class="step-content">
                                <div class="step-title">步骤 5: 合成最终视频</div>
                                <div class="step-desc">将所有元素合成为完整的教学视频。</div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <p id="estimated-time">预计剩余时间: <span id="time-remaining">约5-8分钟</span></p>
                        <p><small class="text-muted">任务ID: {{ task.id }}</small></p>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="d-flex justify-content-between">
                        <a href="/video/create" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left"></i> 返回创建页面
                        </a>
                        <a href="/video/list" class="btn btn-outline-primary">
                            <i class="bi bi-collection-play"></i> 查看视频库
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const taskId = '{{ task.id }}';

            // 模拟进度步骤
            const steps = [
                { id: 'step-1', name: '生成文案', time: [0, 20] },
                { id: 'step-2', name: '创建虚拟花艺师', time: [20, 40] },
                { id: 'step-3', name: '合成语音', time: [40, 60] },
                { id: 'step-4', name: '生成角色动画', time: [60, 80] },
                { id: 'step-5', name: '合成最终视频', time: [80, 100] }
            ];

            let currentProgress = {{ task.progress or 0 }};
            let currentStep = 0;

            // 根据进度更新当前步骤
            function updateCurrentStep(progress) {
                for (let i = 0; i < steps.length; i++) {
                    if (progress >= steps[i].time[0] && progress <= steps[i].time[1]) {
                        currentStep = i;
                        break;
                    }
                }

                // 更新步骤显示
                for (let i = 0; i < steps.length; i++) {
                    const stepElement = document.getElementById(steps[i].id);

                    if (i < currentStep) {
                        stepElement.className = 'step completed';
                    } else if (i === currentStep) {
                        stepElement.className = 'step active';
                    } else {
                        stepElement.className = 'step';
                    }
                }

                // 更新当前步骤显示
                document.getElementById('current-step-display').textContent =
                    `正在${steps[currentStep].name}...`;

                // 更新剩余时间估计
                updateRemainingTime(progress);
            }

            // 更新剩余时间估计
            function updateRemainingTime(progress) {
                const remainingElement = document.getElementById('time-remaining');

                if (progress < 20) {
                    remainingElement.textContent = '约5-8分钟';
                } else if (progress < 40) {
                    remainingElement.textContent = '约4-6分钟';
                } else if (progress < 60) {
                    remainingElement.textContent = '约3-4分钟';
                } else if (progress < 80) {
                    remainingElement.textContent = '约2-3分钟';
                } else {
                    remainingElement.textContent = '不到1分钟';
                }
            }

            // 初始更新当前步骤
            updateCurrentStep(currentProgress);

            // 定期检查任务状态
            function checkTaskStatus() {
                fetch(`/video/status/${taskId}`)
                    .then(response => response.json())
                    .then(data => {
                        // 更新进度条
                        const progressBar = document.getElementById('progress-bar');
                        const statusMessage = document.getElementById('status-message');

                        progressBar.style.width = `${data.progress || 0}%`;
                        progressBar.setAttribute('aria-valuenow', data.progress || 0);
                        progressBar.textContent = `${data.progress || 0}%`;

                        statusMessage.textContent = data.message || '正在处理中...';

                        // 更新当前步骤
                        updateCurrentStep(data.progress || 0);

                        // 如果任务完成或失败，重定向或显示结果
                        if (data.status === 'completed') {
                            window.location.href = `/video/task/${taskId}`;
                        } else if (data.status === 'failed') {
                            statusMessage.textContent = data.message || '处理失败';
                            progressBar.className = 'progress-bar bg-danger';
                        } else {
                            // 继续轮询
                            setTimeout(checkTaskStatus, 3000);
                        }
                    })
                    .catch(error => {
                        console.error('检查任务状态失败:', error);
                        setTimeout(checkTaskStatus, 5000);
                    });
            }

            // 开始检查任务状态
            setTimeout(checkTaskStatus, 3000);

            // 模拟进度增加 (仅供展示)
            function simulateProgress() {
                if (currentProgress < 100) {
                    currentProgress += 1;
                    updateCurrentStep(currentProgress);

                    // 更新进度条
                    const progressBar = document.getElementById('progress-bar');
                    progressBar.style.width = `${currentProgress}%`;
                    progressBar.setAttribute('aria-valuenow', currentProgress);
                    progressBar.textContent = `${currentProgress}%`;

                    setTimeout(simulateProgress, 500);
                }
            }

            // 仅在没有实际进度数据时模拟进度
            if (currentProgress === 0) {
                setTimeout(simulateProgress, 2000);
            }
        });
    </script>
</body>
</html>